<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频demo01</title>
</head>
<body>
是否播放背景音乐<input type="checkbox" id="onchanges">
<audio src="bg.mp3" id="audios"></audio>
</body>
<script>
    var chec=document.getElementById('onchanges');
    var aud=document.getElementById('audios');
    chec.onchange =function () {
        if(this.checked){
            aud.play()
            aud.volume=0;
            timer=setInterval(function () {
                aud .volume+=0.1;
                if(aud .volume>0.9){
                    clearInterval(timer);
                }
            },300)
        }else{
               timer=setInterval(function () {
                   aud .volume-=0.1;
                   if(aud .volume<0.1){
                       aud.pause();
                       clearInterval(timer);
                   }
               },200)
        }
    }
</script>
</html>